<script setup>
import {ref, onUpdated, onMounted} from "vue"
import ComSide from '@/components/ComSide.vue';
import ComHeader from '@/components/ComHeader.vue';
import ComMiniNav from '@/components/ComMiniNav.vue';
import { useRoute, useRouter } from 'vue-router'
import { useNavTabs } from '../store'

// 页头导航工具栏
let router = useRouter()
let unt = useNavTabs()
let navTabs = unt.navTabs

const handleClick = (tab, event) => {
  console.log(tab.props.name)
  router.push(tab.props.name)
}

const editClick = tab => {
  console.log(tab)
  unt.removeTabs(tab)
}

// ------------------------------------
onMounted(() => {
  let route = useRoute()
  if(route.path !== '/home/settings/index') {
    unt.chgTabs(route.meta.title, route.path)
  }
})

onUpdated(() => {
  let route = useRoute()
  unt.chgTabs(route.meta.title, route.path)
  currentPage.value = route.meta.title
})


let isCollapse  = ref(false)
let currentPage = ref('主页')

function chgCollapse(val) {
  // 接收子组件 传递 的数据，控制菜单的收起/展开 
  isCollapse.value = val;
}


</script>

<template>
  <el-container class="outer-container">
      <el-header>
        <!-- 页头 -->
        <ComHeader :is-collapse="isCollapse" @collapse-event="chgCollapse"></ComHeader>
      </el-header>
      <el-container class="inner-container">
        <el-aside>
          <!-- 侧边栏导航 -->
          <ComSide :collapse="isCollapse"></ComSide>
        </el-aside>
        <el-container>
          <el-main>
            <el-card>
              <ComMiniNav :currentPage="currentPage"></ComMiniNav>
            </el-card>
            <el-card class="main-body">
              <template #header>
                <el-tabs v-model="unt.activeName"
                        closable
                        type="card"
                        class="demo-tabs"
                        @tab-click="handleClick"
                        @edit="editClick">
                  <el-tab-pane :label="t.label" :name="t.link" v-for="t in navTabs"><RouterView/></el-tab-pane>
                </el-tabs>
              </template>
              
            </el-card>
          </el-main>
          <el-footer>
            <p>云端中国城·延安大学·版权所有</p>
            <p>&copy; 2024 EduCoder 公网安备43019002000962号</p>
          </el-footer>
        </el-container>
      </el-container>
    </el-container>
</template>
<style>
.el-tabs--card>.el-tabs__header .el-tabs__item.is-active{
  background-color: #545c64 !important;
  color:white;
  border-radius:8px 8px 0 0 ;
}
</style>
<style scoped>
.outer-container{
  height: 100%;
  /* overflow:  hidden; */
}
.el-container .el-header,
.el-container .el-footer {
  position: relative;
  /* background-color: var(--el-color-primary-light-7); */
  color: var(--el-text-color-primary);
  height: 60px;
}

.el-container .el-aside {
  height: calc(100vh - 60px);
  overflow-y:hidden;
  width: auto !important;
  color: var(--el-text-color-primary);
  background: var(--el-color-primary-light-8);
}

.el-container .el-menu {
  border-right: none;
}

.el-container .el-main {
  padding: 0;
  background-color:#f1f2f6;
  height: calc(100vh - 120px);
  display: flex;
  flex-direction: column;
  overflow:hidden;
}
.el-main .main-body{
  margin: 5px;
  flex: 1;
  overflow-y: scroll;
  background-color:white;
}

.el-container .toolbar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  right: 20px;
}
.el-footer{
  display:flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size:12px;
  color:#aaa;
}
</style>